<template>
  <div class="jkd-main-con">
    <div class="main_title">
      <span>监测点查询</span>
    </div>

    <div class="Monitor_form">
      <!-- <div class="sub_title">
        <span>管网信息</span>
      </div> -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="所属管线:" label-width="80px">
          <SelectTreeTest
            v-model="ruleForm.GuanXianValue"
            filterable
            :data="GuanXianList"
            placeholder="请选择所属管线"
          />
        </el-form-item>
        <el-form-item label="选择机构:" label-width="80px">
          <SelectTreeTest
            v-model="ruleForm.JiGouValue"
            filterable
            :data="JiGouList"
            placeholder="请选择机构"
          />
        </el-form-item>
        <el-form-item label="测站名称:" label-width="80px">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入测站名称"
            class="form-item"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="测站类型:" label-width="80px">
          <el-select
            v-model="ruleForm.type"
            placeholder="请选择测站类型"
            class="form-item"
            @focus="handleSTTPChange"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="small"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="form-item-btn-con">
          <el-button @click="resetForm('ruleForm')" class="common-el-button"
            >重置</el-button
          >

          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="common-el-button"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="result-con">
      <!-- <div class="boundary_line"></div> -->
      <div class="sub_title">
        <span>查询结果</span>
        <div class="result-content">
          <div
            class="content-item"
            v-for="(item, key, index) in dataList"
            :key="index"
          >
            <div style="width: 24px; height: 100%">
              <div class="result-item-icon"></div>
            </div>

            <div class="result-item-content" @click="flayto(item)">
              <div
                class="result-item-text"
                v-for="(value, keyName, i) in nameList"
                :key="i"
              >
                <!-- <span>{{ nameList }}:</span> -->
                <!-- <span>{{ keyName}} :</span> -->
                <span>{{ value }}:</span>
                <span>{{ item[keyName] }}{{ unit[keyName] }}</span>
              </div>
            </div>
            <!-- <span> &nbsp;&nbsp;{{ dataList[key]}}{{ unit[key] }}</span> -->
          </div>
        </div>
        <el-pagination
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-show="dataList.length > 0"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
        >
        </el-pagination>
        <!-- <TrendsTable :tableHead="tableHead" :tableData="TableData" :v-show="isShowTable"/> -->
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
import SelectTreeTest from "./SelectTreeTest.vue";
// import TrendsTable from "@/components/TrendsTable.vue";
import elSelectTree from "./selectTree.vue";
import { queryJianCeDianResult, unitList } from "@/until/NameList";
// import { getChanList } from "@/api/http";
import {
  getGuanxianList,
  getJiGouList,
  queryJianCeDianList,
  querySTTPData,
} from "@/api/apiPOI";

import { getLonlatbyId } from "@/api/http";

export default {
  label: "QueryJKD",
  components: {
    elSelectTree,
    SelectTreeTest,
    // TrendsTable,
  },
  computed: {
    /* 转树形数据 */
    optionData() {
      let cloneData = JSON.parse(JSON.stringify(this.GuanXianList)); // 对源数据深度克隆
      let dataArray = cloneData.filter((father) => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.pid == 0; //返回第一层
      });

      return dataArray;
    },
    isShowTable() {
      return this.TableData.length > 0;
    },
    token() {
      return this.$store.getters.token;
    },
  },

  watch: {
    token(newVal, oldVal) {
      // console.log(newVal, oldVal,"newVal, oldVal");
      if (newVal != oldVal) {
        this.getGuanxianList();
        this.getJiGouList();
      }
    },
  },

  created() {},
  mounted() {
    // console.log(window.sessionStorage.getItem("token"));
    // this.$nextTick(() => {
    this.getGuanxianList();
    this.getJiGouList();
    // console.log(cc);
  },

  data() {
    return {
      nameList: queryJianCeDianResult,
      unit: unitList,
      currentPage1: 1,
      total: 0,
      // 整个结果回显
      ruleForm: {
        JiGouValue: "",
        GuanXianValue: "",
        name: "",
        type: "",
      },
      tableHead: [],
      TableData: [],
      dataList: [
        // {
        //   chanName: "管道名称",
        //   chanDiameter: '管材',
        //   chanName1: "管道名称",
        //   chanDiameter1: '管材',
        // }
      ],
      //  tableHead: [
      //         {
      //             column_name: 'column_name', column_comment: '姓名'
      //         },
      //         {
      //             column_name: 'column_age', column_comment: '年龄'
      //         }
      //     ],
      //     // 表格数据
      //     TableData: [
      //         {
      //             column_age: '3',
      //             column_name: 'tm_liu',
      //             column_sex: '女',
      //             column_sex1: '女'
      //         },
      //         {
      //             column_age: '25',
      //             column_name: 'tm_gui',
      //             column_sex: '男',
      //             column_sex1: '女'
      //         }
      //     ],
      // options: [],
      options: [
        {
          value: "0",
          label: "分界监控点",
        },
        {
          value: "1",
          label: "非分界监控点",
        },
        {
          value: "2",
          label: "蓄水池",
        },
        {
          value: "3",
          label: "泵站",
        },
        {
          value: "4",
          label: "水厂",
        },
        {
          value: "5",
          label: "收费站",
        },
      ],
      value: "",

      multiple: true,
      GuanXianValue: "",
      JiGouValue: "",
      GuanXianList: [
        // { id: 1, parentId: 0, label: "一级菜单A", rank: 1 },
        // { id: 2, parentId: 0, label: "一级菜单B", rank: 1 },
        // { id: 3, parentId: 0, label: "一级菜单C", rank: 1 },
        // { id: 4, parentId: 1, label: "二级菜单A-A", rank: 2 },
        // { id: 5, parentId: 1, label: "二级菜单A-B", rank: 2 },
        // { id: 6, parentId: 2, label: "二级菜单B-A", rank: 2 },
        // { id: 7, parentId: 4, label: "三级菜单A-A-A", rank: 3 },
        // { id: 8, parentId: 7, label: "四级菜单A-A-A-A", rank: 4 },
        // { id: 9, parentId: 0, label: "一级菜单C", rank: 1 },
        // { id: 10, parentId: 0, label: "一级菜单end", rank: 1 }
      ],
      JiGouList: [],
    };
  },

  methods: {
    async flayto(data) {
      console.log(data);
      let idData = {
        deviceId: data.deviceId,
      };
      console.log(idData);
      Bus.$emit("addpoint", JSON.stringify(idData));
      // console.log(data,"========")
      const res = await getLonlatbyId(data.deviceId);
      console.log(res);
      if (!res) {
        return;
      }
      let lonlat = [res.x, res.y,15000];

      Bus.$emit("dingwei", lonlat);

      // console.log(data, "=================data")
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log("回显值", this.ruleForm);

          let params = {
            pageSize: 10,
            pageNo: 1,
            data: {
              chancd: this.ruleForm.GuanXianValue
                ? this.filterTableMater(
                    this.ruleForm.GuanXianValue,
                    this.GuanXianList
                  ).id
                : this.ruleForm.GuanXianValue, //所属管线
              code: this.ruleForm.JiGouValue
                ? this.filterTableMater(
                    this.ruleForm.JiGouValue,
                    this.JiGouList
                  ).id
                : this.ruleForm.JiGouValue, //所属机构
              addressName: this.ruleForm.name, //测站名称
              sttp: this.ruleForm.type + "", //测站类型
            },
          };
          this.queryJianCeDianList(params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      Bus.$emit("removepoint", true);
      this.ruleForm.JiGouValue = "";
      this.ruleForm.GuanXianValue = "";
      this.ruleForm.name = "";
      this.ruleForm.type = "";
      this.dataList = [];
    },

    async getGuanxianList() {
  
      getGuanxianList().then((response) => {
        let toString = Object.prototype.toString;
        if (
          toString.call(response) == "[object Array]" &&
          response.length > 0
        ) {
          this.GuanXianList = this.handleArrayData(response);
          console.log(response, "response获取管线列表");
        } else {
          this.GuanXianList = [];
        }
      });
    },

    getJiGouList() {
      getJiGouList().then((response) => {
        let toString = Object.prototype.toString;
        if (
          toString.call(response) == "[object Array]" &&
          response.length > 0
        ) {
          this.JiGouList = this.handleArrayData(response);
        } else {
          this.JiGouList = [];
        }
      });
    },

    handleArrayData(arr) {
      arr.forEach((element) => {
        element.label = element.name;
        if (element.children) {
          this.handleArrayData(element.children);
        }
      });
      return arr;
    },

    /**
     * @description: 递归遍历查找数组对象的某个值
     * @param {string} code
     * @param {array} arr
     * @returns {object}
     */
    filterTableMater(label, arr) {
      for (const item of arr) {
        if (item.label === label) return item;
        if (item.children && item.children.length) {
          const _item = this.filterTableMater(label, item.children);
          if (_item) return _item;
        }
      }
    },

    queryJianCeDianList(parameter) {
      queryJianCeDianList(parameter).then((response) => {
        let toString = Object.prototype.toString;
        if (toString.call(response) == "[object Object]" && response.data) {
          // this.JiGouList = this.handleArrayData(response);
          this.dataList = response.data;
          this.total = response.total;
          console.log("====res=======", response);
        } else {
          // this.JiGouList = [];
        }
      });
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let params = {
        pageSize: 10,
        pageNo: val,
        data: {
          chancd: this.ruleForm.GuanXianValue
            ? this.filterTableMater(
                this.ruleForm.GuanXianValue,
                this.GuanXianList
              ).id
            : this.ruleForm.GuanXianValue, //所属管线
          code: this.ruleForm.JiGouValue
            ? this.filterTableMater(this.ruleForm.JiGouValue, this.JiGouList).id
            : this.ruleForm.JiGouValue, //所属机构
          addressName: this.ruleForm.name, //测站名称
          sttp: this.ruleForm.type, //测站类型
        },
      };
      this.queryJianCeDianList(params);
    },

    handleSTTPChange() {
      querySTTPData().then((res) => {
        if (res && res.data) {
          let op = res.data.map((item) => {
            return {
              value: item.sttp,
              label: item.name,
            };
          });
          this.options = op;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jkd-main-con {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

//标题
.main_title {
  width: 280px;
  height: 35px;
  box-sizing: border-box;
  background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 50px;
  line-height: 34px;
  // background-color: red;
  margin: 10px 0 0 10px;
}

.main_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #c8e9ff;
}

//小标题
.sub_title {
  width: 300px;
  height: 16px;
  background: url("@/assets/rightMenu/selectInfo/monitor_form_title.png") 0px
    2px no-repeat;
  text-align: center;
  color: #00baff;
  margin-bottom: 20px;
}

.sub_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  line-height: 12px;
}

.result-con {
  flex: 1;
}

.boundary_line {
  width: 289px;
  height: 1px;
  background: url(@/assets/rightMenu/selectInfo/boundary_line.png);
  background-size: 100% 100%;
  margin-bottom: 20px;
}

.form-item {
  width: 200px;
}

//表单按钮
.common-el-button {
  width: 70px !important;
  height: 28px !important;
  background-image: url("@/assets/oneMap/form-btn.png") !important;
  background-color: transparent;
  border: 0px;
  padding: 0;
  color: #ffffff;
}

//按钮组样式
.form-item-btn-con {
  text-align: center;
}

.result-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 550px);

  .content-item {
    display: flex;
    // padding: 0 0 16px 0;
    padding: 6px 20px 6px 20px;
    // background-color: rgba(123,124,125,0.3);
    margin-bottom: 0;
    cursor: pointer;

    .result-item-icon {
      width: 21px;
      height: 20px;
      background-image: url("@/assets/panelTree/locate.png");
      margin-right: 10px;
    }

    .result-item-content {
      width: 240px;

      .result-item-text {
        width: 100%;
        height: 18px;
        // background-color: green;
        display: flex;
        justify-content: flex-start;
        text-align: left;

        span:nth-child(2n + 1) {
          width: 96px;
          text-align: right;
          font-family: SourceHanSansCN-Regular;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 12px;
          letter-spacing: 0px;
          color: #daf0ff;
          padding-right: 6px;
          // background-color: blue;
          display: block;
        }

        span:nth-child(2n) {
          width: 200px;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 12px;
          letter-spacing: 0px;
          color: #00baff;
          // background-color: yellow;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .content-item:hover {
    background-color: rgba(15, 97, 175, 0.2);
  }
}

.result-content::-webkit-scrollbar {
  width: 4px;
  height: 1px;
  background: rgba(9, 85, 133, 0.8);
  display: block;
  border-radius: 3px;
}

// // /*滚动条里面小方块*/
.result-content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  // background: #095585;
  background: #052149;
}

// // /*滚动条里面轨道*/
.result-content::-webkit-scrollbar-track {
  border-radius: 3px;
  background: transparent;
}

// ::v-deep {
//   //表单项下边距
//   .el-form-item {
//     margin-bottom: 6px;
//   }
//   //表单文字
//   .el-form-item__label {
//     font-family: SourceHanSansCN-Regular !important;
//     font-size: 12px !important;
//     line-height: 32px !important;
//     color: #daf0ff !important;
//     padding: 0 0 0 16px !important;
//   }

//   //输入框默认样式
//   .el-input__inner {
//     background-color: rgba(4, 57, 109, 0.5) !important;
//     border: 0px !important;
//     color: #daf0ff;
//   }

//   .el-input__inner::placeholder {
//     color: #9ca6af;
//   }

//   .el-input {
//     position: relative;
//     font-size: 12px;
//   }
// }
</style>
